<template>
  <div>
    <view-top-search></view-top-search>
    <div class="book-search">
      <!-- 头部搜索框和按钮 -->
      <div class="search-bar">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="请输入书名或作者名"
        />
        <button @click="searchBooks">搜索</button>
      </div>

      <!-- 按钮组 -->
      <div class="button-group">
        <button
          @click="setFilter('最热')"
          :class="{ active: filter === '最热' }"
        >
          最热
        </button>
        <button
          @click="setFilter('最新')"
          :class="{ active: filter === '最新' }"
        >
          最新
        </button>
        <button
          @click="setFilter('收藏')"
          :class="{ active: filter === '收藏' }"
        >
          收藏
        </button>
        <button @click="toggleFilterDropdown">筛选</button>
      </div>
      <hr class="result-divider" />
      <!-- 筛选按钮 -->
      <div class="filter-dropdown" v-show="showFilterDropdown">
        <div class="filter-button-group">
          <label>更新时间：</label>
          <button
            @click="setUpdateTime('全部')"
            :class="{ active: updateTime === '全部' }"
          >
            全部
          </button>
          <button
            @click="setUpdateTime('最近一天')"
            :class="{ active: updateTime === '最近一天' }"
          >
            最近一天
          </button>
          <button
            @click="setUpdateTime('最近一周')"
            :class="{ active: updateTime === '最近一周' }"
          >
            最近一周
          </button>
          <button
            @click="setUpdateTime('最近一个月')"
            :class="{ active: updateTime === '最近一个月' }"
          >
            最近一个月
          </button>
          <button
            @click="setUpdateTime('最近一年')"
            :class="{ active: updateTime === '最近一年' }"
          >
            最近一年
          </button>
        </div>
        <div class="filter-button-group">
          <label>字数：</label>
          <button
            @click="setWordCount('全部')"
            :class="{ active: wordCount === '全部' }"
          >
            全部
          </button>
          <button
            @click="setWordCount('30万以下')"
            :class="{ active: wordCount === '30万以下' }"
          >
            30万以下
          </button>
          <button
            @click="setWordCount('30万-50万')"
            :class="{ active: wordCount === '30万-50万' }"
          >
            30万-50万
          </button>
          <button
            @click="setWordCount('50万-100万')"
            :class="{ active: wordCount === '50万-100万' }"
          >
            50万-100万
          </button>
        
          <button
            @click="setWordCount('100万-200万')"
            :class="{ active: wordCount === '100万-200万' }"
          >
            100万-200万
          </button>
          <button
            @click="setWordCount('200万以上')"
            :class="{ active: wordCount === '200万以上' }"
          >
            200万以上
          </button>
       
        </div>
        <div class="filter-button-group">
          <label>状态：</label>
          <button
            @click="setstatus('全部')"
            :class="{ active: statusVO === '全部' }"
          >
            全部
          </button>
          <button
            @click="setstatus('连载中')"
            :class="{ active: statusVO === '连载中' }"
          >
            连载中
          </button>
          <button
            @click="setstatus('已完结')"
            :class="{ active: statusVO === '已完结' }"
          >
            已完结
          </button>
        </div>
      </div>
      <!-- 搜索结果 -->
      <div class="search-results" v-if="searchResults.length > 0">
        <div class="result-count">
          共<span style="color: #fa6725"
            >&nbsp{{ searchTotal }}&nbsp</span
          >项相关的结果
        </div>

        <div
          class="result-item"
          v-for="(result, index) in calSearchResults"
          :key="index"
        >
          <div class="result-cover">
            <img :src="result.cover" alt="小说封面" @click="jumpToBook(index)" class="clickable-image"/>
          </div>
          <div class="result-details">
            <h3 class="result-title" @mouseenter="titleIndex=index" @mouseleave="titleIndex=-1" @click="jumpToBook(index)" :class="{ 'active': index===titleIndex }">{{ result.title }}</h3>
            <div class="result-meta">
              <p class="result-author">作者：{{ result.author }}</p>
              <p class="result-tags">
                <span v-for="(tag, index) in result.tags" :key="index">
                  {{ tag }}
                  <span v-if="index < result.tags.length - 1">·</span>
                </span>
              </p>
              <div class="result-meta2">
                <p class="result-word-count">{{ result.total }}万字</p>
                <p class="result-readers">·{{ result.watchNum }}人在读</p>
              </div>
            </div>
            <p class="result-summary">简介：{{ result.introduction }}</p>
            <div class="result-meta1">
              <p class="result-chapter">最新更新：{{ result.lastChapter }}</p>
              <p class="result-update">{{ result.updated }}</p>
            </div>
          </div>
          <hr class="result-divider" />
        </div>
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[6, 12, 24, 36]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="searchTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// import { url } from "stylus";
import ViewTopSearch from "./ViewTopSearch.vue";
// import { useRouter } from 'vue-router';
import { millisecondToTime } from "@/utils/util/dataParse";
export default {
  components: {
    ViewTopSearch,
  },
  mounted() {
    this.searchQuery=this.$route.params.searchQuery
    this.searchBooks()
    
  },
  data() {
    return {
      searchQuery: "",
      filter: "最热",
      updateTime: "全部",
      wordCount: "全部",
      statusVO: "全部",
      showFilterDropdown: false,
      searchResults: [], // 新增：搜索结果数组
      searchTotal:0,
      currentPage: 1,
      pageSize: 6,
      titleIndex: -1,
      sort:0,
      updated:null,
      totalLow:null,
      totalHigh:null,
      status:null,
    };
  },
  computed:{
    calSearchResults(){
      const startIndex = 0;
      const endIndex = startIndex + this.pageSize;
      return this.searchResults.slice(startIndex, endIndex);
    }
  },
  methods: {
    
    jumpToBook(bookId){
      
      // const router = useRouter();
     
      // const routeInfo = this.$router.resolve({
      //     path: '/book',
      //     query:{
      //           book:this.searchResults[bookId]
      //     }
      // });
      // window.open(routeInfo.href, '_blank');
      var that=this
      this.$router.push(
        {
          path:"/book",
          query:{
            book:JSON.stringify(that.searchResults[bookId])
          }
        }
      )
    },
    
    searchBooks() {
      var that=this
      if(this.searchQuery===undefined){
        this.searchQuery=""
      }
      // this.searchChange()
      let url="/user/novel/page?key="+this.searchQuery+"&page="+this.currentPage+"&pageSize="+this.pageSize;
      if(this.sort!=null)
        url+="&sort="+this.sort
      if(this.updated!=null)
        url+="&updated="+this.updated
      if(this.totalLow!=null)
        url+="&totalLow="+this.totalLow
      if(this.totalHigh!=null)
        url+="&totalHigh="+this.totalHigh
      if(this.status!=null)
        url+="&status="+this.status
      this.axios({
        method: "get",
        url:url,
      }).then((res)=>{
        console.log(res.data.data)
        that.searchResults=res.data.data.records
        that.searchResults.forEach(result => {
          if(result.introduction.length>100)
            result.introduction = result.introduction.slice(0, 100) + '...';
          else
            result.introduction = result.introduction;
        });
        that.searchTotal=res.data.data.total
        console.log(that.searchResults)
      }).catch((err)=>{
        console.log(err)
      })
    },
    searchChange(){
      this.currentPage=1;
      this.pageSize=6;
      this.searchBooks()
    },
    setFilter(filter) {
      this.filter = filter;
      switch(this.filter){
        case "最热":
          this.sort=0;
          break;
        case "最新":
        this.sort=1;
          break;
        case "收藏":
        this.sort=2;
          break;
      }
      
      this.searchChange()
    },
    setUpdateTime(updateTime) {
      this.updateTime = updateTime;
      let interval=0;
      switch(this.updateTime){
        case "最近一天":
          interval=1;
          break;
        case "最近一周":
          interval=7;
          break;
        case "最近一个月":
          interval=30;
          break;
        case "最近一年":
          interval=365;
          break;
      }
      if(this.updateTime==="全部")
        this.updated=null;
      else
        this.updated=millisecondToTime(Date.now()-interval*24*60*60*1000);
      this.searchChange()
    },
    setWordCount(wordCount) {
      this.wordCount = wordCount;
      let totalLow=null;
      let totalHigh=null;
      switch(this.wordCount){
        case "30万以下":
          totalHigh=30
          break;
        case "30万-50万":
          totalLow=30;
          totalHigh=50;
          break;
        case "50万-100万":
          totalLow=50;
          totalHigh=100;
          break;
        case "100万-200万":
          totalLow=100;
          totalHigh=200;
          break;
        case "200万以上":
        totalLow=200;
        break;
        }
        this.totalLow=totalLow;
        this.totalHigh=totalHigh;
      
      this.searchChange()
    },
    setstatus(status) {
      this.statusVO = status;
      switch(this.statusVO){
        case "连载中":
          this.status="连载中";
          break;
        case "已完结":
          this.status="已完结";
          break;
        case "全部":
          this.status=null;
          break;
      }
      this.searchChange()
    },
    toggleFilterDropdown() {
      this.showFilterDropdown = !this.showFilterDropdown;
      
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchBooks();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchBooks();
    },
  },
};
</script>

<style scoped>
.book-search {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-bar input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.search-bar button {
  padding: 10px 20px;
  margin-left: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button-group {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  width: 33.33%;
}

.button-group button {
  padding: 10px 20px;
  background-color: transparent;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  margin-right: 10px;
  color: #000306; /* 修改字体颜色 */
  font-size: 14px; /* 修改字体大小 */
}

.button-group button.active {
  color: #ffa500; /* 修改激活状态下的字体颜色 */
  font-size: 14px; /* 修改激活状态下的字体大小 */
}

.result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px; /* 修改字体大小 */
  width: 66%;
  color: rgba(0, 0, 0, 0.4);
}
.result-meta2 {
  display: flex;
  /* align-items: center;
  font-size: 14px; /* 修改字体大小 */
  /* width: 66%;
  color: rgba(0, 0, 0, 0.4); */
}
.result-readers {
  /* align-items: center; */
  font-size: 14px; /* 修改字体大小 */
  color: rgba(0, 0, 0, 0.4);
}
.result-meta1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px; /* 修改字体大小 */
  width: 45%;
  margin-bottom: 10px;
}
.search-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  width: 50%;
}

.search-bar input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 20px 0 0 20px; /* 设置搜索框为半椭圆形 */
}

.search-bar button {
  padding: 10px 20px;
  margin-left: 0; /* 移除按钮的左边距 */
  background-color: #fa6725;
  color: #fff;
  border: none;
  border-radius: 0 20px 20px 0; /* 设置按钮为半椭圆形 */
  cursor: pointer;
}

.filter-dropdown {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  background-color: #f5f5f5;
  padding: 10px; /* 添加边距 */
}

/* 将筛选下拉框替换为类似按钮组的实现方式 */
.filter-button-group {
  display: flex;
  align-items: center; /* 将子元素垂直居中对齐 */
  margin-bottom: 20px;
}

.filter-button-group label {
  margin-right: 10px; /* 为 label 添加右边距，以便与按钮分开 */
}

.filter-button-group button {
  padding: 10px 20px;
  background-color: transparent;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  margin-right: 10px;
  color: #9d9ea0; /* 修改字体颜色 */
}

.filter-button-group button.active {
  color: #fa6725; /* 修改激活状态下的字体颜色 */
  background-color: rgba(250, 103, 37, 0.1); /* 修改激活状态下的按钮背景色 */
}
/* 搜索结果样式 */
.result-count {
  line-height: 20px;
  display: flex;
  text-align: left;
  font-size: 14px;
  /* font-weight: bold; */
  margin-bottom: 10px;
}

.result-item {
  display: flex;
  align-items: center; /* 添加这一行，让图片和右边内容上下对齐 */
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.result-cover {
  transition: all .2s ease-in;
    transition-behavior: normal;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
    transition-delay: 0s;
    transition-property: all;
  flex: 0 0 100px;
  margin-right: 20px;
  position: relative; /* 添加相对定位，以便子元素可以绝对定位 */
}

.result-cover img {
  width: 120px; /* 修改图片宽度 */
  height: auto; /* 保持图片宽高比 */
}

.result-cover .result-details {
  position: absolute; /* 将内容绝对定位在封面上方 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 添加一个半透明的背景色 */
  color: white; /* 设置文字颜色为白色 */
  opacity: 0; /* 初始时内容不可见 */
  transition: all .2s ease-in; /* 添加过渡效果 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.result-title {
  font-size: 1.2em; /* 调整小说标题的字体大小 */
  font-weight: bold;
  margin-bottom: 0px;
  text-align: left; /* 居左对齐 */
  cursor: pointer; /* 设置鼠标指针样式为手形图标 */
}
.result-title.active {
  color: red; /* 点击时字体颜色变为红色 */
}
.result-info,
.result-summary,
.result-chapter,
.result-update {
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.4); /* 设置字体颜色为浅色 */
  text-align: left; /* 居左对齐 */
}
.result-summary {
  width: 80%;
  margin-top: 0px;
  margin-bottom: 25px;
}
.result-update {
  margin-left: 10px; /* 添加左边距，使章节和时间之间有一定间隔 */
}

.result-divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 20px 0;
}

.clickable-image {
  cursor: pointer; /* 设置鼠标指针样式为手形图标 */
}
</style>
